// components/modal/modal.ts
Component({
  properties: {
    // 是否显示弹框
    visible: {
      type: Boolean,
      value: false
    },
    // 弹框标题
    title: {
      type: String,
      value: ''
    },
    // 弹框内容（支持HTML）
    content: {
      type: String,
      value: ''
    },
    // 是否支持点击遮罩关闭
    maskClosable: {
      type: Boolean,
      value: true
    }
  },

  data: {
    formattedContent: '',
    imageUrls: [] as string[]
  },

  observers: {
    'content': function(content: string) {
      this.formatContent(content);
    }
  },

  methods: {
    // 格式化HTML内容
    formatContent(htmlContent: string) {
      if (!htmlContent) {
        this.setData({ formattedContent: '', imageUrls: [] });
        return;
      }

      // 提取图片URL
      const imageUrls: string[] = [];
      const imgRegex = /<img[^>]+src=["']([^"']+)["'][^>]*>/gi;
      let match;
      while ((match = imgRegex.exec(htmlContent)) !== null) {
        imageUrls.push(match[1]);
      }

      // 简单的HTML格式化处理
      let formatted = htmlContent
        // 处理换行
        .replace(/\n/g, '<br/>')
        // 处理段落
        .replace(/<p>/g, '<p style="margin: 8px 0; line-height: 1.6; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理标题
        .replace(/<h([1-6])>/g, '<h$1 style="margin: 12px 0 8px 0; font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理列表
        .replace(/<ul>/g, '<ul style="margin: 8px 0; padding-left: 20px; word-wrap: break-word; overflow-wrap: break-word;">')
        .replace(/<ol>/g, '<ol style="margin: 8px 0; padding-left: 20px; word-wrap: break-word; overflow-wrap: break-word;">')
        .replace(/<li>/g, '<li style="margin: 4px 0; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理链接
        .replace(/<a /g, '<a style="color: #007aff; text-decoration: none; word-wrap: break-word; overflow-wrap: break-word;" ')
        // 处理粗体
        .replace(/<strong>/g, '<strong style="font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;">')
        .replace(/<b>/g, '<b style="font-weight: bold; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理斜体
        .replace(/<em>/g, '<em style="font-style: italic; word-wrap: break-word; overflow-wrap: break-word;">')
        .replace(/<i>/g, '<i style="font-style: italic; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理代码
        .replace(/<code>/g, '<code style="background: #f5f5f5; padding: 2px 4px; border-radius: 3px; font-family: monospace; word-wrap: break-word; overflow-wrap: break-word;">')
        // 处理引用
        .replace(/<blockquote>/g, '<blockquote style="border-left: 4px solid #007aff; margin: 8px 0; padding-left: 12px; color: #666; word-wrap: break-word; overflow-wrap: break-word;">')
        // 移除图片标签，因为我们在外部单独处理
        .replace(/<img[^>]+>/gi, '');

      this.setData({ 
        formattedContent: formatted,
        imageUrls: imageUrls
      });
    },

    // 图片预览
    onImagePreview(e: any) {
      const index = e.currentTarget.dataset.index;
      const urls = this.data.imageUrls;
      
      if (urls && urls.length > 0) {
        wx.previewImage({
          current: urls[index], // 当前显示图片的链接
          urls: urls // 需要预览的图片链接列表
        });
      }
    },

    // 图片加载错误处理
    onImageError(e: any) {
      const index = e.currentTarget.dataset.index;
      console.log(`图片加载失败，索引: ${index}`);
      
      // 可以在这里设置默认图片
      const imageUrls = [...this.data.imageUrls];
      imageUrls[index] = '/static/warrior-01.png'; // 默认图片
      this.setData({ imageUrls });
    },

    // rich-text点击事件处理
    onRichTextTap(e: any) {
      // 检查是否点击的是图片
      const target = e.detail.target;
      if (target && target.dataset && target.dataset.src) {
        const src = target.dataset.src;
        const index = target.dataset.index;
        
        if (this.data.imageUrls && this.data.imageUrls.length > 0) {
          wx.previewImage({
            current: src,
            urls: this.data.imageUrls
          });
        }
      }
    },

    // 点击遮罩层
    onOverlayTap() {
      if (this.data.maskClosable) {
        this.triggerEvent('close');
      }
    },

    // 点击容器（阻止冒泡）
    onContainerTap() {
      // 阻止事件冒泡
    },

    // 点击关闭按钮
    onClose() {
      this.triggerEvent('close');
    }
  }
}); 